<template>
    <div class="brands-details" :class="[{'canbuy':oldPrice>0}]">
        <div class="top-section">
            <p class="title">{{mealName}}</p>
            <p class="slogan">{{slogan}}</p>
        </div>
        <!-- 内容区域 -->
        <div class="content-container">
            <div class="meal-content" v-html="htmlmsg">
            </div>
        </div>
        <!-- 底部按钮 -->
        <div v-show="oldPrice>0" class="bottom-btn-container" @click="buyHandle">
          <span>立即购买</span>
        </div>
    </div>
</template>

<script>
import $ from "jquery";
import Vue from "vue";
import { mapState } from "vuex";
import { formatDate } from "../../common/js/date.js";
import { Button } from "mint-ui";
import "mint-ui/lib/button/style.css";
import { savaToLocal, loadFromlLocal } from "../../common/js/storage.js"; // 公共方法：本地缓存

Vue.component(Button.name, Button);

export default {
  name: "brands-details",
  data() {
    return {
      detailsid: "",
      mealName: "",
      publishTime: "",
      slogan: "",
      htmlmsg: "",
      iconurl:'',
      oldPrice:0,
      discount:0,
      price:0,
    };
  },
  components: {},
  computed: {
    ...mapState(["path", "role", "userid", "soursePath", "storeid"])
  },
  created() {
    this.detailsid = this.$route.params.detailsid;
    this.getDetailsData();
  },
  methods: {
    getDetailsData() {
        this.$http
        .post(this.path + "store/Goods/goodsmsg", {
          goodsid: this.detailsid
        })
        .then(response => {
          let serverData = response.body.result;
          let ginfo = serverData.ginfo;
          this.oldPrice = parseFloat(ginfo.price);
          this.discount = parseFloat(ginfo.discount);
          this.price = (this.oldPrice * this.discount).toFixed(2);
          this.slogan = ginfo.message;
          this.mealName = ginfo.gname;
          this.iconurl = this.soursePath + ginfo.icon;
          this.htmlmsg = this.unescapeHTML(ginfo.htmlmsg);
          this.publishTime = formatDate(
            new Date(parseInt(ginfo.addtime) * 1000),
            "yyyy-MM-dd hh:mm"
          );
        })
        .catch(response => {
          console.log(response);
        });
    },
    unescapeHTML: function(a) {
      a = "" + a;
      return a
        .replace(/&lt;/g, "<")
        .replace(/&gt;/g, ">")
        .replace(/&amp;/g, "&")
        .replace(/&quot;/g, '"')
        .replace(/&apos;/g, "'");
    },
    buyHandle() {
      let payInfoObj = {
        goodId: this.detailsid,
        goodDec: this.slogan,
        price: this.price,
        goodName: this.mealName,
        goodIcon: this.iconurl,
        num: 1
      };
      savaToLocal("dianwu2", "payInfo", payInfoObj);
      this.$router.push({ path: "/payAffirm/" });
    }
  }
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
@import '../../common/css/mixin.styl';

.brands-details {
  font-family: 'Microsoft YaHei';
  width: 100%;
  background-color: #fff;

  &.canbuy {
    padding-bottom: 0.42rem;
  }

  .top-section {
    min-height: 0.4rem;
    margin: 0 0.09rem;
    padding: 0.2rem 0 0.14rem 0;
    border-bottom-1px(#f0f0f0);
    text-align: center;

    .title {
      display: inline-block;
      color: #333;
      font-size: 0.14rem;
      line-height: 0.18rem;
      max-width: 2.4rem;
    }

    .slogan {
      margin-top: 0.05rem;
      color: #999;
      font-size: 0.12rem;
    }
  }

  .content-container {
    .meal-content {
      padding: 0.2rem 0.1rem;
      box-sizing: border-box;

      img {
        width: 100%;
        height: auto;
      }
    }
  }

  .bottom-btn-container {
    position: fixed;
    box-sizing: border-box;
    max-width: 750px;
    width: 100%;
    transform: translate3d(-50%, 0, 0);
    -webkit-transform: translate3d(-50, 0, 0);
    left: 50%;
    height: 0.4rem;
    padding: 0 0.08rem;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    box-shadow: 0 0 1px rgba(230, 230, 230, 1);

    span {
      font-size: 0.15rem;
      letter-spacing: 0.02rem;
      color: #EE799F;
    }
  }
}
</style>